<template>
  <header>
    {{title}}
    <span @click="clickMore">更多</span>
  </header>
</template>

<script>
// 插槽
// 需要传参吗 props
//      1. title
// 需要事件吗？
//      1. 点击更多的时候需要不同的处理

export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  methods: {
    clickMore() {
      this.$emit("click-more");
    },
  },
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  font-size: 18px;
  font-weight: bold;
  color: #6d6d6d;
  span {
    color: #c1c1c1;
    font-size: 16px;
  }
}
</style>